<!--代码逻辑和样式库-->
<script src="./car-detail.component.js"></script>
<style src="./car-detail.scss" lang="scss" scoped></style>

<template>
  <div>
    <el-dialog title="车辆详情" :visible.sync="showDialogFlag" width="90%" @close="closeDialog()">
      <div class="map-container">
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="col-container" id="map-container-car">
              <div class="car-info">
                <div class="title">
                  {{ detailInfo.licensePlate }}
                </div>
                <div class="title">
                  运输单位：{{ detailInfo.compName }}
                </div>
                <el-row>
                  <el-col :span="12" align="center">
                    <div class="border-right">
                      <div class="label-text">车辆状态</div>
                      <div class="aq-vertical-center">
                        <img src="@/assets/imgs/car.png" class="icon-img" />
                        {{ detailInfo.transportStatus }}
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12" align="center">
                    <div>
                      <div class="label-text">报警状态</div>
                      <div class="aq-vertical-center">
                        <img src="@/assets/imgs/warning.png" class="icon-img" />
                        {{ realTimeInfo.isWarningDis?'报警':realTimeInfo.isOverFail?'报警':realTimeInfo.isAirtightness?'报警':realTimeInfo.isPowerFail?'报警':'正常' }}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="col-container">
              <el-tabs type="border-card" v-model="activeName">
                <el-tab-pane name="firstTab" label="车辆数据实时信息">
                  <el-form label-width="110px" label-position="left">
                    <el-form-item label="压力数据:">
                      <div v-if="pressure.pa01 != '0'">1#油气压力 <span class="value-text aq-margin-left-8">{{ pressure.pa01 }} Pa</span></div>
                      <div v-if="pressure.pa02 != '0'">2#油气压力 <span class="value-text aq-margin-left-8">{{ pressure.pa02 }} Pa</span></div>
                      <div v-if="pressure.pa03 != '0'">3#油气压力 <span class="value-text aq-margin-left-8">{{ pressure.pa03 }} Pa</span></div>
                    </el-form-item>
                    <el-form-item label="排放次数:">
                      <span class="value-text">{{ realTimeInfo.disCount }} 次</span>
                    </el-form-item>
                    <el-form-item label="排放累计时长:">
                      <span class="value-text">{{ realTimeInfo.disTimeAll }}</span>
                    </el-form-item>
                    <el-form-item label="人孔盖状态:">
                      <span class="value-text">{{ realTimeInfo.isEntrance?'打开':'关闭' }}</span>
                    </el-form-item>
                    <el-form-item label="泄压阀状态:">
                      <span class="value-text">{{ realTimeInfo.isPreValve?'打开':'正常' }}</span>
                    </el-form-item>
                    <el-form-item label="报警状态:">
                      <el-button v-if="realTimeInfo.isWarningDis" size="mini" round type="danger" class="value-text">排放报警</el-button>
                      <el-button v-if="realTimeInfo.isAirtightness" size="mini" round type="danger" class="value-text">气密性报警</el-button>
                      <el-button v-if="realTimeInfo.isOverFail" size="mini" round type="danger" class="value-text">油气超压报警</el-button>
                      <el-button v-if="realTimeInfo.isPowerFail" size="mini" round type="danger" class="value-text">设备断电报警</el-button>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane name="secTab" label="车辆信息">
                  <el-form label-width="130px" label-position="left">
                    <el-form-item label="车辆名称:">
                      <span class="value-text">{{ detailInfo.vehicleName }}</span>
                    </el-form-item>
                    <el-form-item label="车牌号:">
                      <span class="value-text">{{ detailInfo.licensePlate }}</span>
                    </el-form-item>
                    <el-form-item label="车辆品牌及型号:">
                      <span class="value-text">{{ detailInfo.brandName }} {{ detailInfo.modelNo }}</span>
                    </el-form-item>
                    <el-form-item label="载重量:">
                      <span class="value-text">{{ detailInfo.loadingCapacity }}</span>
                    </el-form-item>
                    <el-form-item label="运输介质:">
                      <span class="value-text">{{ detailInfo.medium }}</span>
                    </el-form-item>
                    <el-form-item label="运输单位:">
                      <span class="value-text">{{ detailInfo.compName }}</span>
                    </el-form-item>
                    <el-form-item label="联系人:">
                      <span class="value-text">{{ detailInfo.contact }}</span>
                    </el-form-item>
                    <el-form-item label="联系方式:">
                      <span class="value-text">{{ detailInfo.phone }}</span>
                    </el-form-item>
                    <el-form-item label="关联设备:">
                      <span v-for="(item,index) in detailInfo.relatedList" :key="index" class="value-text">{{ item.text }}</span>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane name="thirdTab" label="车辆图片">
                  <el-image v-if="detailInfo.vehiclePhoto" :src="file_url+detailInfo.vehiclePhoto" fit="cover"></el-image>
                  <!-- <el-carousel indicator-position="outside" :autoplay="false">
                    <el-carousel-item v-for="item in 4" :key="item">
                      <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></el-image>
                    </el-carousel-item>
                  </el-carousel> -->
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="text-right">
        <el-button type="success" @click="moveToAlertList()">全部报警</el-button>
      </div>
      <div class="aq-margin-top-20">
        <el-table :data="data" highlight-current-row border>
          <el-table-column align="center" width="70" label="排序" fixed>
            <template slot-scope="scope">
              <span>{{ (scope.$index + 1)+ (pageNum -1 )*recordNum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="报警时间" />
          <el-table-column prop="position" label="车辆位置" />
          <el-table-column prop="createTime" label="轨迹回放" width="80px">
            <template slot-scope="scope">
              <el-link type="primary" @click="goMachinePlayback(scope.row.historyLongLat)">轨迹回放</el-link>
            </template>
          </el-table-column>
          <el-table-column label="压力数据">
            <template slot-scope="scope">
              <div v-if="scope.row.equipNo.pressure.pa01 != '0'">1#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa01 }} Pa</span></div>
              <div v-if="scope.row.equipNo.pressure.pa02 != '0'">2#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa02 }} Pa</span></div>
              <div v-if="scope.row.equipNo.pressure.pa03 != '0'">3#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa03 }} Pa</span></div>
              <!--<div>1#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa01 }} Pa</span></div>
              <div>2#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa02 }} Pa</span></div>
              <div>3#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa03 }} Pa</span></div>-->
            </template>
          </el-table-column>
          <el-table-column prop="equipNo.disCount" label="排放次数" />
          <el-table-column prop="equipNo.disTimeAll" label="排放累计时长" />
          <el-table-column label="人孔盖状态">
            <template slot-scope="scope">
              {{ scope.row.equipNo.isEntrance?'打开':'关闭' }}
            </template>
          </el-table-column>
          <el-table-column label="泄压阀状态">
            <template slot-scope="scope">
              {{ scope.row.equipNo.isPreValve?'打开':'关闭' }}
            </template>
          </el-table-column>
          <el-table-column label="排放报警">
            <template slot-scope="scope">
              {{ scope.row.equipNo.isWarningDis?'报警':'无报警' }}
            </template>
          </el-table-column>
          <el-table-column label="设备断电报警">
            <template slot-scope="scope">
              {{ scope.row.equipNo.isPowerFail?'报警':'无报警' }}
            </template>
          </el-table-column>
          <el-table-column label="油罐气密性报警">
            <template slot-scope="scope">
              {{ scope.row.equipNo.isAirtightness?'报警':'无报警' }}
            </template>
          </el-table-column>
          <el-table-column label="油气超压报警">
            <template slot-scope="scope">
              {{ scope.row.equipNo.isOverFail?'报警':'无报警' }}
            </template>
          </el-table-column>
          <el-table-column prop="remove" label="解除状态" />
          <el-table-column label="操作" width="80px" align="center" fixed="right">
            <template slot-scope="scope">
              <el-link v-if="codesCheck.indexOf('Edit') !== -1" :disabled="(!scope.row.equipNo.isWarningDis&&!scope.row.equipNo.isPowerFail&&!scope.row.equipNo.isAirtightness&&!scope.row.equipNo.isOverFail)?false:(scope.row.enumRemove ==='1'?true:false)" type="success" @click="releaseAlert(scope.row.objectId)">解除报警</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页插件 -->
        <pagination v-show="totalNum > 0" :total="totalNum" :page.sync="pageNum" :limit.sync="recordNum" @pagination="getDataList" />
      </div>
    </el-dialog>
    <play-track v-if="showPlayTrackDialog" :show-dialog.sync="showPlayTrackDialog" :track-list="selectedTrack"></play-track>
  </div>
</template>
